<!-- TODO: szc -->
<script setup>
/**
 * @libs
 */
import { nextTick, ref } from 'vue'

/**
 * @data
 */
let compMess = ref({
  'exploreMore': {
    "bgImg": "img_1.png",
    "title": "豪华天堂",
    "content": "每一个细节都是为了给您最舒适的体验,我们一直在改进我们的服务质量,让您尽享最舒心的购物体验",
    "buttonText": "探索更多",
    "link": $szcyydsUrl,
    //是否新标签跳转
    "isNewTab": false,
  },
  "productItems": [
    {
      "cover": "product_1.png",
      "title": "腼腆小狗毛绒玩具家庭珍藏版",
      "discountInfo": "买三件打七九折",
      "price": "￥99.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "product_2.png",
      "title": "超萌小企鹅毛绒玩具情人节限定",
      "discountInfo": "买一件送一件",
      "price": "￥50.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    },
    {
      "cover": "product_3.png",
      "title": "招财小鸭子毛绒玩具装修必备",
      "discountInfo": "满39元减5元",
      "price": "￥60.00",
      "link": $szcyydsUrl,
      //是否新标签跳转
      "isNewTab": false,
    }
  ]
})

const quickViewText = ref("快速预览")


/**
 * 返回指定文件夹下的图片路径
 * @param {String} name 图片名称
 * @returns {String} 图片路径
 */
let getImgUrl = (name) => {
  return new URL(`/src/assets/images/mainImgs/homeImgs/part_5_imgs/${name}`, import.meta.url).href
}

/**
 * 返回探索更多动态样式类
 * @returns {Object}
 */
let exportMoreBgClass = () => {
  return {
    backgroundImage: `url(${getImgUrl(compMess.value['exploreMore'].bgImg)})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  }
}

/**
 * 链接跳转事件
 * @param {Boolean} isNewTab 是否新标签跳转
 * @param {String} link 链接地址
 */
let gotoNavtion = (isNewTab, link) => {
  if (isNewTab) {
    window.open(link)
  } else {
    window.location.href = link
  }
}

/**
 * 探索更多按钮点击事件
 * @param {Boolean} isNewTab 是否新标签跳转
 */
let exportMoreButtonEvent = (isNewTab) => {
  gotoNavtion(isNewTab, compMess.value['exploreMore'].link)
}

/**
 * 商品点击事件
 * @param {Boolean} isNewTab 是否新标签跳转 
 * @param {String} link 链接地址
 */
let productClickEvent = (isNewTab, link) => {
  gotoNavtion(isNewTab, link)
}

// 当前第一张图片索引
let currentFirstProductIndex = ref(0)

//是否使用商品动画效果
let useProductAnimation = ref(true)

// 商品显示最大长度
const maxProductItemsShowLength = 3

// 删除标记常量
const DELETE_SIGNS = {
  'none': -1,
  'first': 0,
  'last': 1
}

// 删除标记
let deleteSign = DELETE_SIGNS['none']

// 商品列表样式类
let part5ProductItemsClass = () => {
  let returnObj = {
    transform: `translateX(${-currentFirstProductIndex.value * 3.6}rem)`
  }
  if (useProductAnimation.value) {
    returnObj.transition = "all 0.5s ease-in-out"
  } else {
    returnObj.transition = "none"
  }

  return returnObj
}

// 切换显示商品
let changeShowProductItems = (direction) => {
  if (deleteSign == DELETE_SIGNS['last']) {
    compMess.value['productItems'].pop()
  } else if (deleteSign == DELETE_SIGNS['first']) {
    useProductAnimation.value = false
    currentFirstProductIndex.value--
    compMess.value['productItems'].shift()
  }

  // 商品长度
  const productLength = Object.keys(compMess.value['productItems']).length

  switch (direction) {
    case 'left':
      if (currentFirstProductIndex.value > 0) {
        currentFirstProductIndex.value--
      } else {
        //去掉动画
        useProductAnimation.value = false
        let newProductItem = compMess.value['productItems'][productLength - 1]
        compMess.value['productItems'].unshift(newProductItem)
        currentFirstProductIndex.value++

        setTimeout(() => {//添加在异步队列尾部，在UI更新完成之后再恢复动画，以做到动画效果显现
          useProductAnimation.value = true//恢复动画
          currentFirstProductIndex.value--
          deleteSign = DELETE_SIGNS['last']
        }, 0)
      }
      break;
    case 'right':
      if (currentFirstProductIndex.value + maxProductItemsShowLength < productLength) {
        currentFirstProductIndex.value++
      } else {
        let newProductItem = compMess.value['productItems'][0]
        compMess.value['productItems'].push(newProductItem)
        setTimeout(() => {
          useProductAnimation.value = true
          currentFirstProductIndex.value++
          deleteSign = DELETE_SIGNS['first']
        }, 0)
      }
      break;
  }
}


</script>
<template>
  <div class="part-5-class">
    <div class="part-5-explore-more" :style="exportMoreBgClass()">
      <div class="part-5-explore-more-title">{{ compMess['exploreMore'].title }}</div>
      <div class="part-5-explore-more-content">{{ compMess['exploreMore'].content }}</div>
      <div class="part-5-explore-more-btn" @click="exportMoreButtonEvent(compMess['exploreMore'].isNewTab)">{{
        compMess['exploreMore'].buttonText }}</div>
    </div>
    <div class="part-5-product-items-box">
      <div v-for="(item, index) in compMess['productItems']" class="part-5-product-items"
        :style="part5ProductItemsClass()">
        <div class="part-5-product-cover">
          <img :src="getImgUrl(item.cover)" class="part-5-product-cover-img" alt="">
          <div class="part-5-product-items-quickView" @click="productClickEvent(item.isNewTab, item.link)">
            {{
              quickViewText }}</div>
        </div>
        <div class="part-5-product-items-title">{{ item.title }}</div>
        <div class="part-5-product-items-discountInfo">{{ item.discountInfo }}</div>
        <div class="part-5-product-items-price">{{ item.price }}</div>
      </div>
      <div class="part-5-product-items-left-arrow" @click="changeShowProductItems('left')">
        <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0.358521 9.88081L8.16099 17.7222C8.57663 18.0987 9.2186 18.0905 9.62601 17.7098C9.84 17.5112 9.96346 17.2381 9.97581 16.9443C9.98404 16.6505 9.88116 16.3732 9.68362 16.1581L2.57663 9.01184L9.70009 1.84908C10.1034 1.42288 10.0993 0.756672 9.69186 0.334602C9.49021 0.123568 9.21861 0.00356667 8.93054 -0.000570391L8.91408 -0.000570392C8.63424 -0.000570417 8.36675 0.107015 8.15688 0.305637L0.358521 8.14701C-0.118844 8.62701 -0.118844 9.40495 0.358521 9.88081Z"
            fill="white" />
        </svg>

      </div>
      <div class="part-5-product-items-right-arrow" @click="changeShowProductItems('right')">
        <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M9.64148 8.11919L1.83901 0.277812C1.42337 -0.0987401 0.781396 -0.0904643 0.373989 0.290225C0.159997 0.488846 0.0365403 0.76195 0.0241946 1.05574C0.0159641 1.34954 0.118845 1.62678 0.316376 1.84195L7.42337 8.98816L0.299915 16.1509C-0.103377 16.5771 -0.0992622 17.2433 0.308145 17.6654C0.509791 17.8764 0.781396 17.9964 1.06946 18.0006H1.08592C1.36576 18.0006 1.63325 17.893 1.84312 17.6944L9.64148 9.85298C10.1188 9.37298 10.1188 8.59505 9.64148 8.11919Z"
            fill="white" />
        </svg>

      </div>
    </div>
  </div>
</template>
<style scoped>
.part-5-class {
  width: 14rem;
  margin: 0 auto;
  height: 4.86rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  margin-top: 1rem;
}

.part-5-explore-more,
.part-5-product-items {
  height: 4.86rem;
  width: 3.2rem;
  /* background-color: antiquewhite; */
  border-radius: 0.32rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.part-5-explore-more-title {
  /* position: absolute; */
  width: 1.79rem;
  height: 0.39rem;
  margin-top: 0.3rem;
  margin-left: 0.24rem;
  font-weight: 500;
  font-size: 0.24rem;
  line-height: 0.39rem;
  color: #fff;
}

.part-5-explore-more-content {
  margin-top: 0.03rem;
  margin-left: 0.24rem;
  width: 2.68rem;
  height: 0.48rem;
  opacity: 0.8;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.24rem;
  color: #fff;
  /* 超出两行则省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 限制显示两行 */
  -webkit-box-orient: vertical;
  /* 设置为垂直排列 */
  overflow: hidden;
  /* 超出内容隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  line-clamp: 2;
  /* 添加标准属性 */
}

.part-5-explore-more-btn {
  width: 1.44rem;
  height: 0.48rem;
  margin-top: 0.4rem;
  margin-left: 0.24rem;
  border-radius: 0.4rem;
  background-color: #fff;
  border: #fff solid 0.01rem;
  font-weight: 500;
  font-size: 0.16rem;
  color: black;
  text-align: center;
  line-height: calc(0.48rem - 0.02rem);
}

.part-5-product-items-box {
  width: 10.40rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 4.86rem;
  position: relative;
  overflow: hidden;
}

.part-5-product-items {
  /* transform: translateX(-3.6rem); */

  /* 动画效果  */

  margin-right: 0.4rem;
}

.part-5-product-items:last-child {
  margin-right: 0;
}

.part-5-product-cover {
  position: relative;
}

.part-5-product-cover-img,
.part-5-product-cover {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.32rem;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.part-5-product-items-quickView {
  position: absolute;
  bottom: 0;
  width: 3.20rem;
  height: 0.4rem;
  border-radius: 0 0 0.32rem 0.32rem;
  text-align: center;
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 0.16rem;
  line-height: 0.4rem;
  display: none;
}

.part-5-product-cover:hover .part-5-product-items-quickView {
  display: block;
}

.part-5-product-items-title {
  margin-top: 0.24rem;
  width: 2.88rem;
  height: 0.36rem;
  font-weight: 400;
  font-size: 0.24rem;
  line-height: 0.36rem;
  text-align: left;
  /* 省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-5-product-items-discountInfo {
  margin-top: 0.1rem;
  background-color: #6BC2B422;
  border-radius: 0.06rem;
  height: 0.3rem;
  width: fit-content;
  text-align: center;
  line-height: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.07rem;
  font-size: 0.16rem;
  font-weight: 300;
  color: #6BC2B4;
}

.part-5-product-items-price {
  margin-top: 0.7rem;
  height: 0.26rem;
  font-weight: 700;
  max-width: 3.2rem;
  color: #E00000;
  font-size: 0.24rem;
  line-height: 0.26rem;
  text-align: left;
}

.part-5-product-items-right-arrow,
.part-5-product-items-left-arrow {
  position: absolute;
  width: 0.54rem;
  height: 0.54rem;
  background-color: transparent;
  border-radius: 50%;
  border: #fff solid 0.01rem;
  top: 1.33rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.part-5-product-items-left-arrow {
  left: 0.21rem;
}

.part-5-product-items-right-arrow {
  right: 0.21rem;
}

.part-5-product-items-left-arrow:hover,
.part-5-product-items-right-arrow:hover {
  background-color: #6BC2B4;
}
</style>